import './UserAdd.css';
import { Input, Radio, Button, Table, Modal, Space, DatePicker, Popconfirm, message } from 'antd';
import React, { useState } from 'react';
import './UserEdit.css';


const UserAdd = () => {
    const clickA = (ev) => {
        console.log(ev.target.dataset.index);
    }
    //单选
    const App = () => (
        <Radio.Group name="radiogroup" defaultValue={1}>
            <Radio value={1}>开启</Radio>
            <Radio value={2}>关闭</Radio>
        </Radio.Group>
    );
    const App_2 = () => (
        <Radio.Group name="radiogroup" defaultValue={1}>
            <Radio value={1}>指定时间</Radio>
            <Radio value={2}>满足条件立刻升级</Radio>
        </Radio.Group>
    );
    const App_3 = () => (
        <Radio.Group name="radiogroup" defaultValue={1}>
            <Radio value={1}>每天凌晨</Radio>
            <Radio value={2}>每周一凌晨</Radio>
            <Radio value={3}>每月1号凌晨</Radio>
        </Radio.Group>
    );
    //气泡
    const confirm=(e)=> {
        console.log(e);
        message.success('Click on Yes');
      }
      
      const cancel=(e)=> {
        console.log(e);
        message.error('Click on No');
      }
    //表格
    const columns = [
        {
            title: '升级成为',
            dataIndex: 'name',
            key: 'name',
            render: text => <a>{text}</a>,
        },
        {
            title: '条件',
            dataIndex: 'source',
            key: 'source',
            ellipsis: true
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <a data-index="1" onClick={showModal}>编辑</a>
                    <Modal title="编辑升级设置" visible={isModalEdit} width={1000} onOk={handleOk} onCancel={handleCancel}>
                    <div className="div_2 mt-2">
                        <span>当前角色</span>
                        <span className="s1">黄金会员</span>
                    </div>
                    <div>
                        <span>升级后的角色</span>
                        <Input className="inp_2" placeholder="升级成为角色" />
                    </div>
                    <p className="mt-2 p1">仅可选择当前加价比底价更低的角色</p>
                    <Table className="mt-4" columns={columns_1} dataSource={data_1} pagination={false} />
                    <Table className="mt-5" columns={columns_2} dataSource={data_2} pagination={false} />
                    </Modal>

                    <Popconfirm
                        title="确认删除吗?"
                        onConfirm={confirm}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                       <a data-index="2" onClick={clickA}>删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    // 渲染数据
    const data = [
        {
            key: '1',
            name: '黄金会员',
            source: '共4个群体：累计消费满500元or累计下单5单or购买指定商品dgsgbdbfdgbdsfbd读书报告第三方公司部分的格式郭德纲',

        },
        {
            key: '2',
            name: '铂金会员',
            source: '共3个群体：累计消费满500元or累计下单5单or购买指定商品dgsgbdbfdgbdsfbd读书报告第三方公司部分的格式郭德纲',

        }

    ];

    //判断点击的是添加弹框还是编辑弹框
    const [isModalButton, setIsModalButton] = useState(false);
    const [isModalEdit, setIsModalEdit] = useState(false);
    const showModal = (ev) => {
        // console.log(ev.target.nodeName,566666666666666);
        // console.log(ev.target.dataset.index);
        if (ev.target.dataset.index == "1") {
            setIsModalEdit(true);
        } else {
            setIsModalButton(true);
        }
      
    };
    const handleOk = (ev) => {
        setIsModalButton(false);
        setIsModalEdit(false);
    };
    const handleCancel = (ev) => {
        setIsModalButton(false);
        setIsModalEdit(false);
    };
    //添加弹框里的日期
    function onChange(date, dateString) {
        console.log(date, dateString);
    }
    //添加弹框里的表格1
    const columns_1 = [
        {
            title: '会员基本信息',
            key: 'tags',
            dataIndex: 'tags',
            width: 100,
            render: tags => (
                <>
                    <Space size="middle">
                        <a data-index="11" >性别</a>
                        <a data-index="22" onClick={clickA}>年龄范围</a>
                        <a data-index="33" onClick={clickA}>生日范围</a>
                        <a data-index="44" onClick={clickA}>会员来源</a>
                        <a data-index="55" onClick={clickA}>会员尾号</a>
                        <a data-index="66" onClick={clickA}>会员标签</a>
                        <a data-index="77" onClick={clickA}>会员地址</a>
                        <a data-index="88" onClick={clickA}>注册时间</a>
                    </Space>

                </>
            ),
        },
    ];
    const data_1 = [
        {
            key: '1',
        },
    ];

    //添加弹框里的表格2 
    const columns_2 = [
        {
            title: '选项',
            dataIndex: 'name',
            key: 'name',
            render: text => <a>{text}</a>,
        },
        {
            title: '范围',
            dataIndex: 'age',
            key: 'age',
            width: 300,
            render: (text, record) => (
                <Radio.Group name="radiogroup" defaultValue={1}>
                    <Radio value={1}>包含</Radio>
                    <Radio value={2}>不包含</Radio>
                </Radio.Group>
            ),
        },
        {
            title: '条件',
            dataIndex: 'jj',
            key: 'jj',
            render: jj => {
                if (jj.id == 1) {
                    return (
                        <div>
                            <Radio.Group name="radiogroup" defaultValue={1}>
                                <Radio value={1}>{jj.hh}</Radio>
                                <Radio value={2}>{jj.kk}</Radio>
                            </Radio.Group>
                        </div>
                    )
                } else if (jj.id == 2) {
                    return (
                        <div className="div_3">
                            <Input className="inpp" /><span className="s_1">岁</span> <span className="ss">至 </span><Input className="inpp" /><span className="s_1">岁</span>
                        </div>
                    )
                } else {
                    return (
                        <div className="div_4">
                            <Space direction="vertical" className="spa">
                                <DatePicker onChange={onChange} placeholder='' />
                            </Space>
                            <span className="ss">至 </span>
                            <Space direction="vertical" className="spa">
                                <DatePicker onChange={onChange} placeholder='' />
                            </Space>
                        </div>
                    )
                }

            },
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <a>删除</a>
                </Space>
            ),
        },
    ];

    const data_2 = [
        {
            key: '1',
            jj: {
                id: 1,
                hh: '男',
                kk: '女',
            },
            name: '性别',

        },
        {
            key: '2',
            jj: {
                id: 2,
                hh: '0',
                kk: '0',
            },
            name: '年龄范围',
        },
        {
            key: '3',
            jj: {
                id: 3,
                hh: '0',
                kk: '0',
            },
            name: '生日范围',
        }
    ];
    return (
        <div className="big-card">
            <div className="grade">
                <h4>修改等级信息</h4>
            </div>
            <div className="detail_add hy">
                {/* 你表演的地方 */}
                <div className="div_1 mt-5">
                    <span>*</span>等级名称<Input className="inp" placeholder="请填写等级名称" />
                </div>
            </div>

            <div className="grade mt-4">
                <h4 className="h4">等级升级</h4>
            </div>
            <div className='d-f'>
                <div className='zi'>
                    <div className='mt-2'>是否开启自动升级</div>
                    <div className='mt-2'>升级时间</div>
                    <div className='mt-2'>选择指定时间</div>
                </div>
                <div className='s2'>
                    <div className='mt-2'><App /></div>
                    <div className='mt-2'><App_2 /></div>
                    <div className='mt-2'><App_3 /></div>
                </div>
            </div>

            <div className="mt-4">

                <Modal className="modal" title="升级设置" width={1000} visible={isModalButton} onOk={handleOk} onCancel={handleCancel}>
                    <div className="div_2 mt-2">
                        <span>当前角色</span>
                        <span className="s1">黄金会员</span>
                    </div>
                    <div>
                        <span>升级后的角色</span>
                        <Input className="inp_2" placeholder="升级成为角色" />
                    </div>
                    <p className="mt-2 p1">仅可选择当前加价比底价更低的角色</p>
                    <Table className="mt-4" columns={columns_1} dataSource={data_1} pagination={false} />
                    <Table className="mt-5" columns={columns_2} dataSource={data_2} pagination={false} />
                </Modal>


                {/* 表格 */}
                <div className="mt-2">
                    <Table
                        columns={columns}
                        dataSource={data}
                        pagination={false}
                        onRow={record => {
                            return {
                                onClick: event => {
                                    // console.log(record);
                                },
                            };
                        }}
                    />
                </div>
                
                <div className="div_44">
                <Button type="primary" className="btn" >保存</Button>
                <Button>取消</Button>
                </div>
            </div>
        </div>
    )
}
export default UserAdd